<template>
	<div class="newsExamine">
		<Row :gutter="16">
			<i-form :model="formItem" :label-width="150" >
				<i-col span="5">
					<Form-item label="选择时间：">
						<Date-picker type="daterange" placement="bottom-start" placeholder="选择日期" v-model="formItem.timeFrame" @on-change="changetime"></Date-picker>
					</Form-item>
				</i-col>
				<i-col span="5">
					<Form-item label="选择部门：">
						<i-select v-model="formItem.department" @on-change="changedepartment">
							<i-option v-for="item in departments" :value="item.name">{{ item.name }}</i-option>
						</i-select>
					</Form-item>
				</i-col>
				<i-col span="5">
					<Form-item label="选择校区：" >
						<i-select v-model="formItem.campus" @on-change="changecampus">
							<i-option v-for="item in campus" :value="item.campusName">{{ item.campusName }}</i-option>
						</i-select>
					</Form-item>
				</i-col>
				<i-col span="5">
					<Form-item label="范围：" >
						<i-select v-model="formItem.range" @on-change="changerange">
							<i-option v-for="item in ranges" :value="item">{{ item }}</i-option>
						</i-select>
					</Form-item>
				</i-col>
			</i-form>
		</Row>
		<Row :gutter="16">
			<i-table @on-selection-change="select" border ref="selection" :content="self" :columns="columns" :data="data"></i-table>
		</Row>
		<Row :gutter="16" class="page">
			<Button type="primary" @click="batch" style="float:left">批量通过</Button>
			<Page show-total :total="dataCount" :page-size="pageSize" @on-change="changepage"></Page>
		</Row>
		<Modal
        v-model="modal"
        :title="actcontent.title"
        width="1200">
        <p>作者：{{actcontent.author}}  来源：{{actcontent.source}}</p>
        <div v-html="actcontent.content"></div>
        <div slot="footer">
            <Button type="error" @click="nopass">不通过</Button>
            <Button type="success" @click="pass">通过</Button>
        </div>
    </Modal>
	</div>
</template>

<script>
export default {

	name: 'newsExamine',

	data () {
		return {
			self: this,
			modal:false,
			actrow:'',
			pageno:0,
			actcontent:{},
			selections:[],
			formItem:{
				timeFrame:'',
				department:'技术部',
				campus:'屯溪路校区',
				range:'未审核',
			},
			departments: this.$store.state.allDepartment,
			campus: this.$store.state.allCampus,
			ranges: ['未审核','审核通过','审核未通过','全部'],
			columns: [
			{
				type: 'selection',
				width: 60,
				align: 'center'
			},
			{
				title: '题目',
				key: 'title'
			},
			{
				title: '文章编号',
				key: 'id'
			},
			{
				title: '作者',
				key: 'author'
			},
			{
				title: '来源',
				key: 'source'
			},
			{
				title: '发帖日期',
				key: 'updata'
			},
			{
				title: '发帖时间',
				key: 'uptime'
			},
			{
				title: '标签',
				key: 'tabs',
				render: (h, params) => {
					return h('p', [
						h('Tag',{
							props: {
								color: 'green'
							}
						}, params.row.tabs)
						]);

				}
			},
			{
				title: '发帖人',
				key: 'people'
			},
			{
				title: '真实时间',
				key: 'time'
			},
			{
				title: '状态',
				key: 'state',
				render:  (h, params)=>{
					let xx='';
					let yy='';
					if (params.row.state==0) {
						xx='primary'
						yy='未审核'
					}else if(params.row.state==1){
						xx='success'
						yy='审核通过'
					}else if(params.row.state==-1){
						xx='error'
						yy='审核不通过'
					}
					return h('div', [
						h('Button', {
							props: {
								type: xx,
								size: 'small',
							}
						},yy)
						]);
				},
			},
			{
				title: '操作',
				key: 'action',
				width: 150,
				align: 'center',
				render:  (h, params)=>{
					return h('div', [
						h('Button', {
							props: {
								type: 'primary',
								size: 'small'
							},
							on: {
								click: () => {
									this.show(params.index);
								}
							}
						}, '查看')
						]);
				},
			},
			],
			dataCount:0,
			data: [],
			pageSize:10,
			alldata:[
			{	
				title: '心理人',
				id: 'k113',
				author: '佚名',
				updata:'2015-2-15',
				uptime: '20:10:16',
				tabs:'心理',
				source:'知乎',
				people:'邢力',
				time:'2017.11.5 20:10',
				state:0,
				content:'<p>啊啊啊</p>',
				isalter:false
			},
			{	
				title: '心理人',
				id: 'k143',
				author: '佚名',
				updata:'2015-2-15',
				uptime: '20:10:13',
				tabs:'心理',
				source:'知乎',
				people:'邢力',
				time:'2017.11.5 20:10',
				state:0,
				content:'<p>啊啊啊</p>',
				isalter:true
			},
			{	
				title: '心理人',
				id: 'k123',
				author: '佚名',
				updata:'2015-2-15',
				uptime: '20:10:16',
				tabs:'心理',
				source:'知乎',
				people:'邢力',
				time:'2017.11.5 20:10',
				state:0,
				content:`<p>啊啊啊</p>`,
				isalter:false
			},
			],

		}
	},
	methods: {
		changetime(index){
			console.log(index)
		},
		changedepartment(index){
			console.log(index)
		},
		changecampus(index){
			console.log(index)
		},
		changerange(index){
			console.log(index)
		},
		show (index) {
			this.actrow=(this.pageno*10)+index;
			this.actcontent=this.alldata[this.actrow];
			this.modal=true
		},
		pass(){
			this.modal=false;
			this.alldata[this.actrow].state=1;
		},
		nopass(){
			this.modal=false;
			this.alldata[this.actrow].state=-1;
		},
		changepage(index){
			this.pageno=index-1;
			var datastart = ( index - 1 ) * this.pageSize;
			var dataend = index * this.pageSize;
			if (this.alldata.length<=dataend) {
				dataend=this.alldata.length
			}
			this.data = this.alldata.slice(datastart,dataend);
		},
		getdata(){
			this.dataCount=this.alldata.length;
			if (this.alldata.length<=this.pageSize) {
				this.data=this.alldata
			}else{
				this.data=this.alldata.slice(0,this.pageSize);
			}
		},
		select(index){
			this.selections=index
		},
		batch(){
			for(let i of this.selections){
				for (let x of this.alldata){
					if (i.id==x.id) {
						x.state=1
					}
				}
			}
			
		}
	},
	created(){
		this.getdata();
	}
}
</script>

<style lang="css" scoped>
.newsExamine{
	width: 100%;
	height: 100%;
	padding-left: 20px;
	padding-right: 20px
}
.newsExamine .page{
	padding-top: 20px;
	padding-right: 20px;
	text-align: right;
}
</style>